<template>
	<view class="regionPage">
		<view class="pageHeader">
			<view class="headContent">
				<view class="headContentBack1"></view>
				<view class="headContentBack2"></view>
				<p>统计</p>
			</view>
		</view>
		<view class="chartHead">
			<view class="chooseTimeStr" @click="timeToggleOpen">{{yearStr}}年份-{{mouthStr}}月份
				<view style="margin-left: 6rpx;color: #757575 ;font-size: 28rpx;">▼</view>
			</view>
			<view class="nearTimeBtn" @click="goNear"><view>近期明细</view> ➤</view>
		</view>
		<scroll-view scroll-y :show-scrollbar="false" class="pageContent">
			<view class="allDataScroll">
				<view class="allDataTitle">
					<view>收入￥{{allData.revenue.toFixed(2)}}&nbsp;&nbsp;&nbsp;支出￥{{allData.expenditures.toFixed(2)}}</view>
					<view>合计￥{{allData.sum.toFixed(2)}}</view>
				</view>
				<scroll-view class="allDataContent" scroll-y :show-scrollbar="false">
					<view v-if="everyDayItem.length === 0" style="width: 100%;font-size: 26rpx;text-align: center;color: #336eec;">暂无数据</view>
					<view :class="{everyItem: true,everyItemBig: item.click}" v-for="(item,index) in everyDayItem" :key="index" @click="openDayData(index)">
						<view class="dayDataSmall">
							<view style="width: 130rpx;">{{item.type}}</view>
							<view style="width: 300rpx;text-align: center;">{{item.payment}}{{item.formula}}元</view>
							<view style="width: 200rpx;">{{item.time}}</view>
							<view style="color: #ebebeb;" v-if="!item.click">▼</view>
							<view style="color: #ebebeb;" v-if="item.click">▲</view>
						</view>
						<view class="dayDataBig" v-if="item.show">
							备注:&nbsp;&nbsp;{{item.remark?item.remark:'未填写'}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="dataChartss" v-if="spendColorList.length !== 0 || revenueColorList.length !== 0">
				<view class="chartsHeader"><view class="startIcon" style="background-color: #336eec;"></view>收支总览</view>
				<view v-if="spendColorList.length === 0 && revenueColorList.length === 0" style="width: 100%;font-size: 26rpx;text-align: center;color: #336eec;margin-top: 70rpx;position: absolute;">暂无收支记录</view>
				<view v-if="spendColorList.length !== 0 || revenueColorList.length !== 0" class="chartsData formulaDataClass">
					<!-- <view style="color: #ff9d26;" class="itemAllData" v-for="(item,index) in spendList" :key="index">
						{{item.name}} -{{item.value}}
					</view>
					<view style="color: #377aff;" class="itemAllData" v-for="(item,index) in revenueList" :key="index">
						{{item.name}} +{{item.value}}
					</view> -->
					<view>
					<view class="revenueBlock">
						<view class="paymentTitle">支出(元)</view>
						<view class="paymentContent1">
							<view class="formulaTop" style="float: right;">
								<view>90%</view><view>70%</view><view>50%</view><view>30%</view><view>10%</view>
							</view>
							<view class="formulaBottom1">
								<view class="spendItemData" v-for="(item,index) in spendList" :key="index">
									<view>
										<view class="spendItemStr">
											{{item.value}}元 {{item.name}}
										</view>
										<view class="spendItemIcons" style="display: flex;justify-content: flex-end;">
											{{item.ratioStr}}%
											<view :style="{width: 310*item.ratio + 'rpx'}" class="spendItemIcon"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="spendBlock">
						<view class="paymentTitle">收入(元)</view>
						<view class="paymentContent2">
							<view class="formulaTop">
								<view>10%</view><view>30%</view><view>50%</view><view>70%</view><view>90%</view>
							</view>
							<view class="formulaBottom2">
								<view class="revenueItemData" v-for="(item,index) in revenueList" :key="index">
									<view>
										<view class="revenueItemStr">
											{{item.name}} {{item.value}}元
										</view>
										<view class="revenueItemIcons" style="display: flex;justify-content: flex-start;">
											<view :style="{width: 310*item.ratio + 'rpx'}" class="revenueItemIcon"></view>
											{{item.ratioStr}}%
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					</view>
				</view>
			</view>
			<view class="dataCharts">
				<view class="chartsHeader"><view class="startIcon" style="background-color: #ff9d26;"></view>支出占比饼图</view>
				<view v-if="spendColorList.length === 0" style="width: 100%;font-size: 26rpx;text-align: center;color: #336eec;margin-top: 70rpx;position: absolute;">暂无支出数据</view>
				<view v-if="spendColorList.length !== 0" class="chartsPhoto">
					<canvas canvas-id="myid" id="myid" :class="{charts:true,chartsShow:!canvasShow}"/>
				</view>
			</view>
			<view class="dataCharts">
				<view class="chartsHeader"><view class="startIcon" style="background-color: #1affce;"></view>收入占比饼图</view>
				<view v-if="revenueColorList.length === 0" style="width: 100%;font-size: 26rpx;text-align: center;color: #336eec;margin-top: 70rpx;position: absolute;">暂无收入数据</view>
				<view v-if="revenueColorList.length !== 0" class="chartsPhoto">
					<canvas canvas-id="myidd" id="myidd" :class="{charts:true,chartsShow:!canvasShow}"/>
				</view>
			</view>
		</scroll-view>

		<uni-popup ref="timePopup" :is-mask-click="false" style="position: relative;z-index: 99999;">
			<view class="popup-content" style="position: relative;z-index: 99999;">
				<view class="timePopup">
					<view class="timeHead">
						<view @click="timeToggleClose" style="color: #a6a6a6; ">取消</view>
						<view @click="timeChoose" style="color: #336eec;">确定</view>
					</view>
					<view class="timeContent">
						<picker-view
							indicator-style="height: 100rpx;background-color: rgba(240, 240, 240, 0.2);color: #000;"
							:value="value" @change="bindChange" class="picker-view">
							<picker-view-column>
								<view class="timeItem" v-for="(item,index) in yearList" :key="index">{{item}}年份</view>
							</picker-view-column>
							<picker-view-column>
								<view class="timeItem" v-for="(item,index) in mouthList" :key="index">{{item}}月份</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uCharts from '../../components/uCharts/u-charts.js';
	var uChartsInstance = {};
	export default {
		data() {
			return {
				values: [0,0],
				value: [0,0],
				yearList: ['全部'],
				mouthList: ['全部'],
				yearStr: '全部',
				mouthStr: '全部',
				spendDatas: {},
				everyDayItem: [],
				allData: {
					revenue: 0,
					expenditures: 0,
					sum: 0
				},
				canvasShow: true,
				spendColorList: [],
				revenueColorList: [],
				spendList: [],
				revenueList: [],
			}
		},
		mounted() {
			this.getJsonDate()
			this.getServerDatas();
		},
		methods: {
			getServerDatas() {
				let typeData = []
				let typeDatas = []
				for(let i in this.everyDayItem){
					if(this.everyDayItem[i].payment === '支出'){
						typeData.push(this.everyDayItem[i].type)
					}else{
						typeDatas.push(this.everyDayItem[i].type)
					}
				}
				let spendData = this.setChartsFormat(typeData)
				let revenueData = this.setChartsFormat(typeDatas)
				this.spendColorList = []
				this.revenueColorList = []
				this.spendList = []
				this.revenueList = []
				for(let i in spendData){
					this.spendColorList.push('#'+Math.random().toString(16).substr(2, 6))
				}
				for(let i in revenueData){
					this.revenueColorList.push('#'+Math.random().toString(16).substr(2, 6))
				}
				let res = {series: [{data: spendData}]};
				let ress = {series: [{data: revenueData}]};
				this.spendList = spendData
				this.revenueList = revenueData
				let spendSum = this.allData.expenditures
				let revenueSum = this.allData.revenue
				for(let i = 0; i < this.spendList.length; i++){
					this.spendList[i].ratio = (this.spendList[i].value / spendSum).toFixed(2)
					this.spendList[i].ratioStr = (this.spendList[i].ratio * 100).toFixed(0)
				}
				for(let i = 0; i < this.revenueList.length; i++){
					this.revenueList[i].ratio = (this.revenueList[i].value / revenueSum).toFixed(2)
					this.revenueList[i].ratioStr = (this.revenueList[i].ratio * 100).toFixed(0)
				}
				this.$forceUpdate()
				if(spendData.length > 0){
					this.drawChartss('myid', res, this.spendColorList);
				}
				if(revenueData.length > 0){
					this.drawChartss('myidd', ress, this.revenueColorList);
				}
			},
			setChartsFormat(typeData){
				let spendData = []
				let result = Array.from(new Set(typeData))
				result.forEach(item => {
					let obj = {}
					obj.name = item
					obj.value = 0
					spendData.push(obj)
				})
				for(let i in spendData){
					for(let j in this.everyDayItem){
						if(spendData[i].name === this.everyDayItem[j].type){
							spendData[i].value = Number(spendData[i].value) + Number(this.everyDayItem[j].formula)
						}
					}
				}
				for(let i = 0; i < spendData.length; i++) {
					for (let j = 0; j < spendData.length - i - 1; j++) {
						if (spendData[j].value < spendData[j+1].value) {
							let temp = spendData[j]
							spendData[j] = spendData[j + 1]
							spendData[j + 1] = temp
						}
					}
				}
				if(spendData.length > 20){
					let obj = {name: "小比重类型",value: 0}
					for(let i = 20; i < spendData.length; i++){
						obj.value = Number(obj.value) + Number(spendData[i].value)
					}
					spendData.length = 20
					spendData[20] = obj
				}
				return spendData
			},
			drawChartss(id, data, colorList) {
				let that = this
				const ctx = uni.createCanvasContext(id, this);
				      uChartsInstance[id] = new uCharts({
				        type: "pie",
				        context: ctx,
				        width: uni.upx2px(700),
				        height: uni.upx2px(600),
				        series: data.series,
				        animation: true,
				        background: "#FFFFFF",
				        color: colorList,
				        padding: [30,0,0,0],
				        extra: {
				          pie: {
				            offsetAngle: 0,
				            labelWidth: 10,
				            border: false,
							canvas2d: true,
							fontSize: 10,
				          },
				        },
						legend:{
							show: true,
							fontSize: 10,
							itemGap: 12,
							lineHeight: 15
						},
						canvas2d:true
				      });
			},	
			getJsonDate(){
				let dates = uni.getStorageSync('storageDataJson')
				if(dates){
					this.spendDatas = JSON.parse(dates)
					let yearLists = Object.keys(this.spendDatas)
					this.yearList = [...this.yearList, ...yearLists]
					this.$forceUpdate()
				}
				this.getDayData()
				this.setDayDataFormat()
			},
			openDayData(index){
				let that = this
				this.everyDayItem[index].click = !this.everyDayItem[index].click
				setTimeout(function(){
					that.everyDayItem[index].show = !that.everyDayItem[index].show
					that.$forceUpdate()
				},150)
				this.$forceUpdate()
			},
			setDayDataFormat(){
				for(let i in this.everyDayItem){
					this.everyDayItem[i].click = false
					this.everyDayItem[i].show = false
				}
				this.$forceUpdate()
			},
			getDayData(){
				let that = this
				let dates = uni.getStorageSync('storageDataJson')
				if(!dates){
					this.everyDayItem = []
					return
				}
				let resData = JSON.parse(dates)
				let yearLists = Object.keys(resData)
				if(yearLists.length === 0){
					this.everyDayItem = []
					return
				}
				if(this.value[0] === 0){
					// 选择全部数据
					this.everyDayItem = []
					that.allData = {
						revenue: 0,
						expenditures: 0,
						sum: 0
					}
					let mouthNum = []
					for(let i in yearLists){
						let dataList = Object.keys(resData[yearLists[i]])
						dataList.forEach(item =>  {
							if(item !== 'yearSum'){
								let obj = {}
								let numStr = item.split("-")[0] + '' + item.split("-")[1]
								obj.mouthNum = Number(numStr)
								obj.mouth = item
								mouthNum.push(obj)
							}else{
								that.allData.revenue = Number(that.allData.revenue) + Number(resData[yearLists[i]]['yearSum'].revenue)
								that.allData.expenditures = Number(that.allData.expenditures) + Number(resData[yearLists[i]]['yearSum'].expenditures)
								that.allData.sum = Number(that.allData.sum) + Number(resData[yearLists[i]]['yearSum'].sum)
							}
						})
					}
					for(let i = 0; i < mouthNum.length; i++) {
						for (let j = 0; j < mouthNum.length - i - 1; j++) {
							if (mouthNum[j].mouthNum < mouthNum[j+1].mouthNum) {
								let temp = mouthNum[j]
								mouthNum[j] = mouthNum[j + 1]
								mouthNum[j + 1] = temp
							}
						}
					}
					let moutnList = []
					Object.keys(mouthNum).sort().forEach(function(item){
						moutnList.push(mouthNum[item].mouth)
					})
					let dayList = []
					for(let i in moutnList){
						let yearStr = moutnList[i].split("-")[0]
						dayList.push(...this.sortDayList(resData[yearStr][moutnList[i]]))
					}
					dayList.forEach(item =>{
						let year = item.split("-")[0]
						let mouth = item.split("-")[0] + '-' + item.split("-")[1]
						this.everyDayItem.push(...resData[year][mouth][item]['dayData'])
					})
					that.$forceUpdate()
					return
				}
				// 进行数据筛选
				if(this.value[0] !== 0 && this.value[1] === 0){
					this.everyDayItem = []
					let yearData = resData[that.yearList[this.value[0]]]
					that.allData = {
						revenue: yearData['yearSum']['revenue'],
						expenditures: yearData['yearSum']['expenditures'],
						sum: yearData['yearSum']['sum']
					}
					let dayJson = {}
					Object.keys(yearData).sort().forEach(item => {
						if(item !== 'yearSum'){
							dayJson = {...dayJson,...yearData[item]}
						}
					})
					let dayList = this.sortDayList(dayJson)
					dayList.forEach(item =>{
						let year = item.split("-")[0]
						let mouth = item.split("-")[0] + '-' + item.split("-")[1]
						this.everyDayItem.push(...resData[year][mouth][item]['dayData'])
					})
					this.$forceUpdate()
					return
				}
				this.everyDayItem = []
				let mouthData = resData[that.yearList[this.value[0]]][that.yearList[this.value[0]] + '-' + that.mouthList[this.value[1]]]
				that.allData = {
					revenue: mouthData.monthSum['revenue'],
					expenditures: mouthData.monthSum['expenditures'],
					sum: mouthData.monthSum['sum']
				}
				let dayList = this.sortDayList(mouthData)
				dayList.forEach(item =>{
					let year = item.split("-")[0]
					let mouth = item.split("-")[0] + '-' + item.split("-")[1]
					this.everyDayItem.push(...resData[year][mouth][item]['dayData'])
				})
				this.$forceUpdate()
			},
			sortDayList(jsonData){
				let dayNum = []
				Object.keys(jsonData).sort().forEach(function(item){
					if(item !== 'monthSum'){
						let numStr = item.split("-")[0] + '' + item.split("-")[1] + '' + item.split("-")[2]
						let obj = {}
						obj.dayNum = Number(numStr)
						obj.day = item
						dayNum.push(obj)
					}
				})
				for(let i = 0; i < dayNum.length; i++) {
					for (let j = 0; j < dayNum.length - i - 1; j++) {
						if (dayNum[j].dayNum < dayNum[j+1].dayNum) {
							let temp = dayNum[j]
							dayNum[j] = dayNum[j + 1]
							dayNum[j + 1] = temp
						}
					}
				}
				let dayList = []
				Object.keys(dayNum).sort().forEach(function(item){
					dayList.push(dayNum[item].day)
				})
				return dayList
			},
			bindChange(e) {
				this.values = e.detail.value
				if(this.yearList[this.values[0]] == '全部'){
					this.mouthList = ['全部']
					return
				}
				let mouthLists = Object.keys(this.spendDatas[this.yearList[this.values[0]]])
				this.mouthList = ['全部']
				mouthLists.forEach(item => {
					if(item !== "yearSum"){
						this.mouthList.push(item.substring(5,7))
					}
				})
			},
			timeChoose() {
				let that = this
				this.value = this.values
				this.yearStr = this.yearList[this.value[0]]
				this.mouthStr = this.mouthList[this.value[1]]
				this.getDayData()
				this.$refs.timePopup.close()
				setTimeout(function(){
					that.canvasShow = true
					that.getServerDatas();
				},200)
			},
			timeToggleOpen() {
				this.$refs.timePopup.open('bottom')
				this.canvasShow = false
			},
			timeToggleClose() {
				let that = this
				this.$refs.timePopup.close()
				setTimeout(function(){
					that.canvasShow = true
					that.getServerDatas();
				},200)
			},
			goNear(){
				uni.navigateTo({
					url: '../Region/nearRegion/nearRegion'
				});
			}
		}
	};
</script>

<style>
	.regionPage {
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: rgba(230, 240, 255, 1.0);
	}

	.pageHeader {
		width: 100%;
		height: 11vh;
		position: relative;
		background: linear-gradient(to right, rgba(0, 47, 167, 0.9), rgba(0, 47, 167, 0.4));
		overflow: hidden;
	}

	.pageHeader .headContent {
		width: 100%;
		height: 6vh;
		margin-top: 5vh;
		position: absolute;
		text-align: center;
		font-size: 34rpx;
		line-height: 7vh;
		letter-spacing: 1rpx;
		font-weight: 500;
		color: rgba(238, 234, 220, 1.0);
	}

	.pageHeader .headContent>p {
		position: absolute;
		z-index: 20;
		width: 100%;
		text-align: center;
	}

	.pageHeader .headContent .headContentBack1 {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: -7.5vh;
		left: -35rpx;
		background-color: rgba(0, 47, 167, 0.3);
	}

	.pageHeader .headContent .headContentBack2 {
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: 1vh;
		left: 20%;
		background-color: rgba(0, 47, 167, 0.5);
	}

	.timePopup {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
	}

	.timePopup .timeHead {
		height: 70rpx;
		width: 100%;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.timePopup .timeHead>view {
		/* width: 20%; */
		height: 70rpx;
		margin: 0 20rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
	}

	.timePopup .timeContent {
		width: 100%;
		border-bottom: 1rpx solid #efefef;
	}

	.timePopup .timeContent .picker-view {
		width: 100%;
		height: 800rpx;
	}

	.timePopup .timeContent .picker-view .timeItem {
		height: 100rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
	}

	.chartHead {
		width: 750rpx;
		height: 80rpx;
		position: relative;
		top: 0;
		z-index: 100;
		display: flex;
		justify-content: space-between;
		background-color: rgba(255, 255, 255, 1.0);
		box-sizing: border-box;
		padding:0 14rpx;
	}
	
	.chartHead .chooseTimeStr{
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		color: #5a5a5a;
	}
	
	.chartHead .nearTimeBtn{
		height: 80rpx;
		margin-right: 10rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: rgba(0, 47, 167, 0.8);
		text-align: right;
		display: flex;
	}
	
	.pageContent {
		width: 100%;
		height: calc(80vh - 82rpx);
		position: relative;
		top: 0;
		z-index: 100;
	}
	
	.allDataTitle{
		width: 710rpx;
		height: 50rpx;
		margin: 10rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #ededed;
	}
	
	.allDataTitle > view{
		font-size: 28rpx;
		line-height: 50rpx;
		color: #868686;
		font-weight: 400;
		white-space: nowrap;
	}
	
	.allDataContent{
		width: 710rpx;
		height: 600rpx;
		margin: 10rpx;
		position: absolute;
		top: 70rpx;
	}
	
	.everyItem{
		font-size: 28rpx;
		width: 710rpx;
		height: 60rpx;
		margin-bottom:6rpx;
		background-color: #f4feff;
		border-radius: 4rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		transition: all 0.2s ease-in-out; 
	}
	
	.everyItemBig{
		height: 150rpx;
		transition: all 0.2s ease-in-out; 
	}
	
	.dayDataSmall{
		display: flex;
		justify-content: space-between;
	}
	
	.dayDataSmall > view{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #a0a0a0;
	}
	
	.dayDataBig{
		min-height: 50rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #a0a0a0;
	}
	
	.allDataScroll{
		width: 730rpx;
		height: 680rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		background-color: rgba(255, 255, 255, 1.0);
		box-shadow: 2rpx 2px 4px rgba(225, 225, 225, 1.0),
			-2rpx -2rpx 4px rgba(225, 225, 225, 1.0);
	}

	.dataCharts {
		width: 730rpx;
		height: 670rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		background-color: rgba(255, 255, 255, 1.0);
		box-shadow: 2rpx 2px 4px rgba(225, 225, 225, 1.0),
			-2rpx -2rpx 4px rgba(225, 225, 225, 1.0);
	}
	
	.chartsHeader{
		width: 710rpx;
		height: 50rpx;
		margin: 10rpx;
		position: absolute;
		/* line-height: 50rpx; */
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}
	
	.startIcon{
		width: 16rpx;
		height: 16rpx;
		border-radius: 100%;
		margin-right: 10rpx;
	}
	
	.chartsPhoto{
		width: 710rpx;
		margin: 0 10rpx;
		height: 600rpx;
		position: relative;
		top: 65rpx;
	}
	
	.charts {
		width: 100%;
		height: 100%;
	}
	
	.chartsShow{
		margin-left: 1000rpx;
	}
	
	.dataChartss {
		width: 730rpx;
		height: 500rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		background-color: rgba(255, 255, 255, 1.0);
		box-shadow: 2rpx 2px 4px rgba(225, 225, 225, 1.0),
			-2rpx -2rpx 4px rgba(225, 225, 225, 1.0);
	}
	
	.chartsData{
		width: 710rpx;
		margin: 0 10rpx;
		height: 500rpx;
		position: relative;
		top: 65rpx;
		box-sizing: border-box;
		padding: 4rpx;
		/* display: flex;
		flex-wrap: wrap; */
	}
	
	.itemAllData{
		position: relative;
		float: left;
		min-width: 120rpx;
		margin: 4rpx 10rpx;
		height: 45rpx;
		white-space: nowrap;
		font-size: 26rpx;
	}
	
	.formulaDataClass{
		display: flex;
	}
	
	.formulaDataClass > view{
		overflow: auto;
		height: 420rpx;
		display: flex;
	}
	
	.formulaDataClass > view .revenueBlock{
		width: 350rpx;
		height: 420rpx;
	}
	
	.formulaDataClass > view .spendBlock{
		width: 350rpx;
		height: 420rpx;
	}
	
	.formulaDataClass > view  > view .paymentTitle{
		width: 350rpx;
		height: 40rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 22rpx;
		color: #999999;
		letter-spacing: 2rpx;
		font-weight: 500;
	}
	
	.formulaDataClass > view  > view .paymentContent1{
		width: 350rpx;
		height: 380rpx;
	}
	
	.formulaDataClass > view  > view .paymentContent2{
		width: 350rpx;
		height: 380rpx;
	}
	
	.formulaDataClass .formulaTop{
		width: 320rpx;
		height: 34rpx;
		line-height: 28rpx;
		font-size: 20rpx;
		color: #868686;
		display: flex;
		justify-content: space-between;
	}
	
	.formulaDataClass .formulaTop > view{
		width: 64rpx;
		height: 34rpx;
		text-align: center;
	}
	
	.formulaDataClass .formulaBottom1{
		width: 350rpx;
		height: 344rpx;
		overflow: auto;
	}
	
	.formulaDataClass .formulaBottom2{
		width: 350rpx;
		height: 344rpx;
		overflow: auto;
		border-left: 1rpx solid #a0a0a0;
	}
	
	.formulaDataClass .formulaBottom1 .spendItemData{
		width: 350rpx;
		height: 70rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.formulaDataClass .formulaBottom2 .revenueItemData{
		width: 350rpx;
		height: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.formulaBottom1 .spendItemData .spendItemIcons{
		height:30rpx;
		line-height:30rpx;
		font-size: 16rpx;
		color: #c8c8c8;
		white-space: nowrap;
	}
	
	.formulaBottom2 .revenueItemData .revenueItemIcons{
		height:30rpx;
		line-height:30rpx;
		font-size: 16rpx;
		color: #c8c8c8;
		white-space: nowrap;
	}
	
	.formulaBottom1 .spendItemData .spendItemIcon{
		height: 30rpx;
		float: right;
		background-color: #306ddf;
		border-bottom-left-radius: 15rpx;
		border-top-left-radius: 15rpx;
	}
	
	.formulaBottom2 .revenueItemData .revenueItemIcon{
		height: 30rpx;
		float: right;
		background-color: #ff9d26;
		border-bottom-right-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}
	
	.formulaBottom1 .spendItemData .spendItemStr{
		height:30rpx;
		line-height:36rpx;
		font-size: 18rpx;
		color:#2f2f2f;
		margin-right: 6rpx;
		white-space: nowrap;
		text-align: right;
		font-style:italic;
	}
	
	.formulaBottom2 .revenueItemData .revenueItemStr{
		height:30rpx;
		line-height:36rpx;
		font-size: 18rpx;
		color:#2f2f2f;
		margin-left: 2rpx;
		white-space: nowrap;
		text-align: left;
		font-style:italic;
	}
</style>
